<template>
  <div class="shop-content" >
      <grid-view :cols="3" :lineSpace="15" :v-margin="20" v-if="subcategories.list" >
        <div class="item" v-for="(item,index) in subcategories.list" :key="index">
          <a :href="item.link">
            <img :src="item.image" alt="" class="item-img" @load="shopImgLoad">
            <div class="item-text">{{item.title}}</div>
          </a>
        </div>
      </grid-view>
  </div>
</template>

<script>
  import GridView from 'components/common/gridView/GridView'

  export default{
    name: 'ShopContent',
    components:{
      GridView
    },
    props:{
      subcategories: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    data(){
      return {
        imgLength: 0
      }
    },
    methods:{
      shopImgLoad(){
        if(++this.imgLength === this.subcategories.list.length){
          this.$emit('shopImgLoad')
        }

      }
    }

  }
</script>

<style scoped>
  .shop-content{
   overflow: hidden;
  }

  .item {
      text-align: center;
      font-size: 12px;
    }

    .item-img {
      width: 80%;
    }

    .item-text {
      margin-top: 15px;
    }
</style>
